<template>
  <div class="home">
    <div class="center reset-center">
      <div class="line-one">
        <div class="notice border">
          <div class="title">
            <img src="@/assets/image/notice-title.png" alt="">
            <span>公告通知</span>
            <router-link to="/list">
              更多
              <span> &gt;&gt;</span>
            </router-link>
          </div>
          <ul class="ul">
            <li
              v-for="item in notice"
              :key="item.id"
            >
              <p>
                <a href="">
                {{item.title}}
                </a>
              </p>
              <span>【{{item.create_time}}】</span>
            </li>
          </ul>
        </div>
        <div class="days border">
          <div class="title">
            <img src="@/assets/image/days-title.png" alt="">
            <span>安全天数</span>
          </div>
          <ul>
            <li
              v-for="item in days"
              :key="item.id"
            >
              <p>
                {{item.name}}安全生产：
                <span>{{item.days}}</span>
                天 下个安全百日：
                <span>{{item.behind}}</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="duty border">
          <div class="title">
            <img src="@/assets/image/duty-title.png" alt="">
            <span>应急值班</span>
          </div>
          <ul>
            <li>
              <p>
                姓名：
                <span>程建</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="notification border">
          <div class="title">
            <img src="@/assets/image/notification-title.png" alt="">
            <span>安全通报</span>
          </div>
          <ul class="ul">
            <li
              v-for="item in notification"
              :key="item.id"
            >
              <p>
                <a href="">
                  {{item.title}}
                </a>
              </p>
              <span>【{{item.create_time}}】</span>
            </li>
          </ul>
        </div>
        <div class="work border">
          <div class="title">
            <img src="@/assets/image/work-title.png" alt="">
            <span>工作重点</span>
          </div>
          <ul class="ul">
            <li
              v-for="item in work"
              :key="item.id"
            >
              <p>
                <a href="">
                {{item.title}}
                </a>
              </p>
              <span>【{{item.create_time}}】</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="line-two">
        <div class="image border">
          <img src="/assets/logo.png" alt="">
          <span>郑州铁路局：9月28日至10月8日发送旅客502万人次</span>
        </div>
        <div class="card border">
          <div class="card_title">
            <ul>
              <li
                v-for="(item, index ) in list"
                :key="item.index"
                @click="change(index)"
                :class="{active:index == current}"
              >
                <span>{{item.title}}</span>
              </li>
            </ul>
          </div>
          <div class="information_body">
            <ul class="ul"
              v-for="(item_body, index) in information"
              :key="item_body.index"
              :class="{activeText:index !== current}"
            >
              <li
                v-for="item in item_body"
                :key="item.id"
              >
                <p>
                  <a href="">
                  {{item.title}}
                  </a>
                </p>
                <span>【{{item.create_time}}】</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="line-three">
        <div class="title">
          <div class="line"></div>
          <p>友情链接</p>
        </div>
        <div class="contain">
          <ul>
            <li
            v-for="item in links"
            :key="item.id"
            >
              <a href="">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLink, getNotice, getNotification, getWork, getDataInfo, getMessageInfo, getDays } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      links: [],
      notice: [],
      notification: [],
      work: [],
      list: [
        { title: '工务文电资料' },
        { title: '工务部文电' }
      ],
      current: 0,
      information: [],
      days: []
    }
  },
  methods: {
    change (index) {
      this.current = index
    }
  },
  async created () {
    const res = await getLink()
    // 友情链接
    this.links = res.data.data
    // 公告通知
    this.notice = (await getNotice()).data.data
    // 安全通报
    this.notification = (await getNotification()).data.data
    // 重点工作
    this.work = (await getWork()).data.data
    // 工务电文
    this.information.push((await getMessageInfo()).data.data)
    this.information.push((await getDataInfo()).data.data)
    // 安全天数
    this.days = (await getDays()).data.data
    console.log(this.days)
  }
}
</script>

<style lang="scss" scoped src='./home.scss'>
</style>
